<template>
  <el-button type="primary" @click="openDialog">
    添加权限
  </el-button>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="权限名" width="250"/>
    <el-table-column prop="keyword" label="关键字"  width="250"/>
    <el-table-column prop="description" label="描述"  width="250">
    <template #default="scope">
      <span v-if="scope.row.description==null">无</span>
    </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
        >Edit</el-button
        >
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
        >Delete</el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <el-dialog
      v-model="dialogVisible"
      width="50%"
  >
    <h2 style="text-align: center">{{dialogTitle}}</h2>
    <br/>
    <el-form :model="permission"
             label-width="120px"
             :size="formSize"
             id="editForm"
             :rules="rules"
             ref="ediForm"
    >
      <el-form-item label="权限名" prop="name" required>
        <el-input  v-model="permission.name" />
      </el-form-item>
      <el-form-item label="关键字" prop="keyword" required>
        <el-input v-model="permission.keyword" />
      </el-form-item>
      <el-form-item label="描述" prop="description" >
        <el-input v-model="permission.description" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button  @click="cancel">取消</el-button>
        <el-button  type="primary" @click="handleCreate" v-show="isShowCreateBtn">
          确定
        </el-button>
         <el-button  type="primary" @click="edit" v-show="isShowUpdateBtn">
          确定修改
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>

export default {
  name: "permission",
  data() {
    return{
      dialogVisible:false,
      tableData:[{}],
      formSize:"default",
      dialogTitle: "",
      isShowCreateBtn:false,
      isShowUpdateBtn:false,
      permission:{
        name: "",
        keyword: "",
        description: "",
      },
      rules:{
        name:[
          {required: true, message: '请填写角色名',trigger:['blur','change']}
        ],
        keyword:[
          {required: true,message: '请输入关键字',trigger:['blur','change']}
        ]
      }
    }
  },
  methods: {
    cancel(){
      this.dialogVisible=false;
      this.isShowCreateBtn=false;
      this.isShowUpdateBtn=false;
      this.permission={
        name: "",
        keyword: "",
        description: "",
      }
    },
    openDialog(){
      this.dialogTitle="添加权限";
      this.dialogVisible=true;
      this.isShowCreateBtn=true;
    },
    fetchData(){
      this.$axios.get("http://localhost:8888/permission/findAllPermission")
          .then(response => {
            this.tableData=response.data.data;
            console.info(this.tableData);
            // document.getElementById("editForm").reset();
            this.permission={
              name: "",
              keyword: "",
              description: "",
            }
            this.dialogVisible = false;
            this.isShowUpdateBtn=false;
            this.isShowCreateBtn=false;
          })
    },
    handleEdit(number,permission){
      this.dialogTitle="编辑权限";
      this.dialogVisible=true;
      this.isShowUpdateBtn=true;
      this.permission=permission;
    },
    edit(){
      this.$refs.ediForm.validate(isValid => {
        if(isValid){
          this.$axios.post("http://localhost:8888/permission/updatePermission",this.permission)
              .then(response=>{
                if(response.data.status==10000){
                  this.$message({
                    message: "修改成功",
                    type: "success",
                  });
                  this.fetchData();
                }else{
                  this.$message.error({
                    type:"error",
                    message:response.data.msg
                  })
                }
              })
        } else {
          this.$message.error('请填写必填信息！');
        }
      })
    },
    handleDelete(number,permission){
      this.$alert(`确认删除${permission.name}吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        console.info(permission.id);
        const id=permission.id;
        this.$axios.get("http://localhost:8888/permission/deletePermission", {params:{id}})
            .then(response=>{
              if(response.data.status==10000){
                this.$message({
                  message: "删除成功",
                  type: "success",
                });
                this.fetchData();
              }else{
                this.$message.error({
                  type:"error",
                  message:response.data.msg
                })
              }
            })
            .catch(()=>{
            })
      })

    },
    handleCreate(){
      this.$refs.ediForm.validate(isValid => {
        if(isValid){
          this.$axios.post("http://localhost:8888/permission/addPermission",this.permission)
              .then(response=>{
                if(response.data.status==10000){
                  this.$message({
                    message: "添加成功",
                    type: "success",
                  });
                  this.fetchData();
                }else{
                  this.$message.error({
                    type:"error",
                    message:response.data.msg
                  })
                }
              })
        } else {
          this.$message.error('请填写必填信息！');
        }
      })
    },
  },
  created() {
    this.fetchData()
  },
  mounted() {
  }
}
</script>

<style scoped>

</style>